<template>
  <div id="realtimeAlarm">
    <!-- <el-header></el-header> -->

    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div class="title">
          <div class="name">设备名称: {{ item.tagName }}</div>
          <!-- <div class="time">设备编号: 1244</div>  -->
        </div>
        <div class="cont">
          <div>设备位置: {{ item.pos }}</div>
          <div>报警级别: {{ item.alarmLevel }}</div>
        </div>
        <p class="pos">采集时间: {{ timeTranslate(item.alarmTime) }}</p>
      </li>
    </ul>
  </div>
</template>
<script >
export default {
  data() {
    return {
      list: [
        {
          tagName: "紧急报警#tag1",
          pos: "",
          alarmLevel: "",
          alarmType: "紧急报警",
          alarmDesc: "",
          alarmStatus: "报警",
          gisName: "",
          cameraName: "",
          alarmTime: "2023-08-04T10:33:19.3016469+08:00",
          solvePerson: "",
          solveTime: "1970-01-01T00:00:00",
          recoverTime: "1970-01-01T00:00:00",
          solveRes: "",
          ack: false,
          alarmValue: "True",
        },
        {
          tagName: "紧急报警#tag1",
          pos: "",
          alarmLevel: "",
          alarmType: "紧急报警",
          alarmDesc: "",
          alarmStatus: "报警",
          gisName: "",
          cameraName: "",
          alarmTime: "2023-08-04T10:33:19.3016469+08:00",
          solvePerson: "",
          solveTime: "1970-01-01T00:00:00",
          recoverTime: "1970-01-01T00:00:00",
          solveRes: "",
          ack: false,
          alarmValue: "True",
        },
        {
          tagName: "紧急报警#tag1",
          pos: "",
          alarmLevel: "",
          alarmType: "紧急报警",
          alarmDesc: "",
          alarmStatus: "报警",
          gisName: "",
          cameraName: "",
          alarmTime: "2023-08-04T10:33:19.3016469+08:00",
          solvePerson: "",
          solveTime: "1970-01-01T00:00:00",
          recoverTime: "1970-01-01T00:00:00",
          solveRes: "",
          ack: false,
          alarmValue: "True",
        },
      ],
      currentPage: 1,
      pageSize: 3,
      name: ""
    };
  },
  methods: {
    getList() {
      setInterval(() => {
      let data = {
        token: "",
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        alarmLevel: '',
        alarmDesc: this.name,
        alarmType: ''
      }
      this.$axios({
        url: 'http://192.168.143.8:8087/realalarm',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: this.$QS.stringify(data)
      }).then((res) => {
        console.log( res.rows, 'res');
        this.list= res.rows;
        // this.list = this.list.slice(0, 3);
      })
        .catch((err) => {
          console.log(err);
        });
        }, 1000);
      },
        // 转换时间格式
        timeTranslate(val) {
          // 格式化时间2022-07-05T09:57:39.000Z 成 2018-08-07 00:00:00
          return this.dayjs(val).format("YYYY-MM-DD HH:mm:ss");
        },

          // 自适应
          winSize() {
        var ratioY = window.innerHeight / 880;
        var ratioX = window.innerWidth / 370;

        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
        // this.getDoorAlarm();
      },
    },
    mounted() {
      this.getList();
      this.winSize();
      window.onresize = () => {
        return (() => {
          var ratioX = window.innerWidth / 370;
          var ratioY = window.innerHeight / 880;

          window.document.body.style.transform = "scale(" + ratioY + ")";
          window.document.body.style.transformOrigin = "0px 0px";
        })();
      };
    },
    watch: {},
    computed: {},
    filters: {},
    components: {},
  };
</script>
<style scoped lang="less">
#realtimeAlarm {
  width: 1296px;
  width: 990px;
  height: 880px;
  padding: 40px 30px;
  box-sizing: border-box;
  overflow: hidden;
}

ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

li {
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .cont {
    display: flex;
    justify-content: flex-start;

    div {
      width: 48%;
    }
  }
}

.title {
  display: flex;
  justify-content: flex-start;

  div {
    // width: 48%;
  }

  font-size: 32px;
  font-weight: bold;
}

p {
  margin: 20px 0px 0;

  font-size: 32px;
  font-weight: bold;
}
</style>
